<!--suppress ALL -->
<script lang="ts">
export default {
  name: "RepositoryProductTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    :data="dataState.entityList"
    border
    highlight-current-row
  >
    <!-- 列表 -->
    <el-table-column label="组件名称" min-width="100" prop="modelName"/>

    <el-table-column align="center" label="组件类型" prop="modelType" width="95">
      <template #default="scope">
        <el-tag v-if="scope.row.modelType === 'decoder'" type="success">解码模块</el-tag>
        <el-tag v-else-if="scope.row.modelType === 'template'" type="success">模板模块</el-tag>
        <el-tag v-else-if="scope.row.modelType === 'webpack'" type="success">前端模块</el-tag>
        <el-tag v-else-if="scope.row.modelType === 'service'" type="success">服务模块</el-tag>
        <el-tag v-else type="warning">未定义</el-tag>
      </template>
    </el-table-column>

    <el-table-column align="center" label="接口版本" prop="modelVersion" width="90"/>
    <el-table-column align="center" label="最新版本" prop="lastVersion.version" width="90"/>
    <el-table-column align="center" label="文件状态" prop="lastVersion.stage" width="90"/>
    <el-table-column align="center" label="当前版本" prop="usedVersion.version" width="90"/>
    <el-table-column :formatter="formatFileSize4elTableColumn2" align="center" label="文件大小" prop="lastVersion.fileSize"
                     width="90"/>

    <el-table-column align="center" label="是否加载" prop="load" width="90">
      <template #default="scope">
        <el-switch
          v-model="scope.row.load"
          :disabled="scope.row.component === 'kernel' || ((scope.row.modelType !== 'decoder') && (scope.row.modelType !== 'service')) "
          :active-value=true
          :inactive-value=false
          @change="handleStatusChange(scope.row)"
        />
      </template>
    </el-table-column>

    <el-table-column :formatter="formatDate4elTableColumn2" align="center" label="版本时间" prop="lastVersion.updateTime"
                     width="170"/>

    <el-table-column align="center" label="状态" prop="conflictStatus" width="90">
      <template #default="scope">
        <el-tag v-if="scope.row.lastVersion === undefined" type="info">未扫描</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 0" type="info">未扫描</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 1" type="info">未下载</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 2" type="danger">已下载</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 3" type="danger">已解压</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 4" type="warning">未安装</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 5" type="success">已安装</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 6" type="danger">破损包</el-tag>
        <el-tag v-else-if="scope.row.lastVersion.status === 7" type="primary">待升级</el-tag>
        <el-tag v-else type="danger">未定义</el-tag>
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作" width="150">
      <template #default="scope">
        <el-button :icon="Download" circle plain type="primary" @click.stop="handleDownloadPackage(scope.row)"/>
        <el-button :icon="SetUp" circle plain type="primary" @click.stop="handleInstallPackageDialog(scope.row)"/>
        <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDeletePackageDialog(scope.row)"/>
      </template>
    </el-table-column>
  </el-table>

</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";

import {
  RepositoryItem, RepositoryQueryParam, RepositoryVerItem
} from "@/api/repo/comp/cloud/file/types";
import {
  listCloudEntityList,
  scanCloudEntityList
} from "@/api/repo/comp/cloud/file";
import {Download, SetUp, Delete} from '@element-plus/icons-vue';
import {formatDate4elTableColumn, formatDate4elTableColumn2} from '@/utils/formatter';
import {formatFileSize4elTableColumn, formatFileSize4elTableColumn2} from '@/utils/fileutil';
import {RepoProductComp, RepoProductEntity} from "@/api/device/product/types";
import {ElMessage, ElMessageBox} from "element-plus";
import {CreateDeviceDecoderRequestVO} from "@/api/repo/comp/local/jar-file/types";
import {updateDeviceDecoderEntity} from "@/api/repo/comp/local/jar-file";
import {updateLoadConfig} from "@/api/repo/comp/local/app-service";

const emit = defineEmits(['rowClick', 'update', 'delete', 'deleteVersion', 'download', 'install']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable, getEntities, getSelects});

// 数据状态：定义
let dataState = reactive({
  // 选中ID数组
  selects: [],
  // 实体数据
  entityList: [] as RepoProductComp[],
  // 表单数据
  formData: {} as RepoProductEntity,
});


/**
 * 捕获下载按钮
 * @taskParam row 行信息
 */
function handleDownloadPackage(row: any) {
  emit('download', 'table', 'download', row);
}

function handleInstallPackageDialog(row: any) {
  if (row.status < 2) {
    return;
  }

  emit('install', 'table', 'install', row);
}

function handleDeletePackageDialog(row: any) {
  if (row.status < 2) {
    return;
  }

  emit('delete', 'table', 'delete', row);
}

/**
 * 用户状态change
 */
function handleLoadService(row: { [key: string]: any }) {
  let modelName = row.modelName;
  let modelType = row.modelType;
  let modelVersion = row.modelVersion;
  let component = row.component;
  let load = row.load;

  if (row.component === 'kernel') {
    row.load = true;
    return;
  }

  const text = row.load === true ? '修改为启动' : '修改为停用';
  ElMessageBox.confirm(
    '确认要' + text + '' + row.modelName + '启动项目吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      // 更新配置
      await updateLoadConfig(modelName, component, load);

      for (let entity of dataState.entityList) {
        if (entity.modelName === modelName) {
          entity.load = load;
        }
      }
    })
    .then(() => {
      ElMessage.success(text + '成功');
    })
    .catch(() => {
      row.load = row.load !== true;
    });

}

function handleLoadDecoder(row: { [key: string]: any }) {
  let modelName = row.modelName;
  let modelType = row.modelType;
  let modelVersion = row.modelVersion;
  let load = row.load;

  let fileName = modelName + "." + modelVersion + ".jar";


  const text = load ? '修改为启动' : '修改为停用';
  ElMessageBox.confirm(
    '确认要' + text + '' + fileName + '解码器吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // 修改后台数据
      let form = {} as CreateDeviceDecoderRequestVO;
      form.fileName = fileName;
      form.load = load;
      updateDeviceDecoderEntity(form);


      for (let entity of dataState.entityList) {
        if (entity.modelName === modelName) {
          entity.load = load;
        }
      }

    })
    .then(() => {
      ElMessage.success(text + '成功');
    })
    .catch(() => {
      row.load = !load;
    });
}

/**
 * 用户状态change
 */
function handleStatusChange(row: { [key: string]: any }) {
  let modelType = row.modelType;

  if (modelType === "decoder") {
    handleLoadDecoder(row);
  }

  if (modelType === "service") {
    handleLoadService(row);
  }

}

/**
 * 刷新表单
 */
function refreshTable(entity: RepoProductEntity) {
  dataState.formData = entity;
  dataState.entityList = entity.comps;
}

/**
 * 获得选中的ID
 */
function getSelects(): any {
  return dataState.selects;
}

/**
 * 获得实体信息
 */
function getEntities(): any {
  return dataState.entityList;
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>
